import React, { useState } from 'react'
import { Selector } from 'antd-mobile'

const options = [
    {
        label: '重庆',
        value: '重庆',
    },
    {
        label: '北京',
        value: '北京',
    },
    {
        label: '成都',
        value: '成都',
    },
    {
        label: '南川',
        value: '南川',
    },
    {
        label: '天津',
        value: '天津',
    },
    {
        label: '北戴河',
        value: '北戴河',
    }
]


const CityList = ({ onCityEvent }) => {

    const changeCurrentCity = (index) => {
        // 给父组件传值

        if (index.length > 0) {
            const cityName = index[0]
            onCityEvent(cityName)
        }

    }

    return (
        <>
            <div style={{
                margin: "20px"
            }}>
                <Selector
                    style={{
                        '--border-radius': '100px',
                        '--border': 'solid transparent 1px',
                        '--checked-border': 'solid var(--adm-color-primary) 1px',
                        '--padding': '8px 24px',
                    }}
                    showCheckMark={false}
                    options={options}
                    defaultValue={['1']}
                    onChange={changeCurrentCity}
                />
            </div>
        </>
    )
}

const RadioMode = () => {
    const [value, setValue] = useState('1')
    return (
        <Selector
            options={options}
            value={[value]}
            onChange={v => {
                if (v.length) {
                    setValue(v[0])
                }
            }}
        />
    )
}

export default CityList